<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="showSearch">
        <!-- 搜索 -->
        <el-input v-model="query.procDefName" clearable prefix-icon="el-icon-search" placeholder="流程名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation />
      </div>

      <div class="uifix-crud-opts">
        <el-button
          check-per="['flowable:deployment:add']"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        >新增</el-button>
      </div>
      <el-table ref="table" v-loading="crud.loading" stripe height="calc(100vh - 330px)" :data="crud.data" style="width: 100%;margin-top:10px" @selection-change="crud.selectionChangeHandler">
        <el-table-column label="流程编号" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-button type="text" @click="handleFlowRecord(scope.row)">
              <span>{{ scope.row.procInsId }}</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true" />
        <el-table-column label="流程类别" align="center" prop="category" width="100px" />
        <el-table-column label="流程版本" align="center" width="80px">
          <template slot-scope="scope">
            <el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" align="center" prop="createTime" width="180" />
        <el-table-column label="流程状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.procState === '进行中' ? '' : scope.row.procState === '已完成' ? 'success' : 'danger'" size="mini">{{ scope.row.procState }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="耗时" align="center" prop="duration" width="180" />
        <el-table-column label="当前节点" align="center" prop="taskName" />
        <el-table-column label="办理人" align="center">
          <template slot-scope="scope">
            <label v-if="scope.row.assigneeName">{{ scope.row.assigneeName }} <el-tag type="info" size="mini">{{ scope.row.deptName }}</el-tag></label>
            <label v-if="scope.row.candidate">{{ scope.row.candidate }}</label>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                更多操作<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-tickets" @click.native="handleFlowRecord(scope.row)">
                  详情
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-close" @click.native="handleStop(scope.row)">
                  取消申请
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-delete" @click.native="handleDelete(scope.row)">
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>

    <!-- 发起流程 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-table v-loading="processLoading" stripe fit :data="definitionList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border>
        <el-table-column label="流程名称" align="center" prop="name" />
        <el-table-column label="流程版本" align="center">
          <template slot-scope="scope">
            <el-tag size="medium">v{{ scope.row.version }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="流程分类" align="center" prop="category" />
        <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit-outline"
              @click="handleStartProcess(scope.row)"
            >发起流程</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total,prev,pager,next"
          :total="definitionList.length"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>

import crudProcess from '@/api/flowable/process'
import { stopProcess } from '@/api/flowable/process'
import { delDeployment } from '@/api/flowable/finished'
import { listDefinition } from '@/api/flowable/definition'
import CRUD, { presenter, header, form, crud } from '@brotherCrud/crud'
import pagination from '@brotherCrud/Pagination'
import rrOperation from '@brotherCrud/RR.operation'
const defaultForm = { procInsId: null, procDefName: null, category: null, createTime: null, duration: null, taskName: null }

export default {
  name: 'Deploy',
  components: { pagination, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '流程表单',
      url: 'api/flowable/task/myProcess',
      crudMethod: { ...crudProcess }
    })
  },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      title: '',
      // 是否显示弹出层
      open: false,
      definitionList: [],
      processLoading: false,
      currentPage: 1,
      pageSize: 10,
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        name: null,
        category: null,
        key: null,
        tenantId: null,
        active: 1,
        deployTime: null,
        derivedFrom: null,
        derivedFromRoot: null,
        parentDeploymentId: null,
        engineVersion: null
      }
    }
  },
  created() {
  },
  methods: {
    // 页面切换方法
    handleCurrentChange(val) {
      this.currentPage = val
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true
      this.title = '发起流程'
      this.listDefinition()
    },
    listDefinition() {
      listDefinition(this.queryParams).then(response => {
        this.processLoading = true
        this.definitionList = response.content
        this.processTotal = response.totalElements
        this.processLoading = false
      })
    },
    /**  发起流程申请 */
    handleStartProcess(row) {
      this.$router.push({
        // name: 'Record',
        // 用params 会有刷新问题 暂时用query方式请求
        path: '/flowable/task/record/index',
        query: {
          deployId: row.deploymentId,
          procDefId: row.id
        }
      })
    },
    /**  取消流程申请 */
    handleStop(row) {
      const params = {
        instanceId: row.procInsId
      }
      this.$confirm('确定要终止流程吗？', '提示', { type: 'warning' }).then(
        () => {
          stopProcess(params).then(res => {
            this.crud.refresh()
            this.$message.success(res.msg)
          })
        })
    },
    /** 流程流转记录 */
    handleFlowRecord(row) {
      this.$router.push({
        // name: 'Record',
        path: '/flowable/task/record/index',
        query: {
          procInsId: row.procInsId,
          deployId: row.deployId,
          taskId: row.taskId
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // const ids = row.procInsId || this.ids;// 暂不支持删除多个流程
      const ids = row.procInsId
      this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delDeployment(ids)
      }).then(() => {
        this.crud.refresh()
        this.$message.success('删除成功')
      })
    }
  }
}
</script>

